<template>
  <div style="display:inline-block">
    <el-popover placement="bottom" width="200" trigger="click" popper-class="Fg-table-style">
      <template #reference>
        <MenuButton svg="table3" />
      </template>
      <el-form :inline="true" size="mini" :model="formInline" class="demo-form-inline">
        <el-form-item label="背景颜色">
          <el-color-picker v-model="formInline.backgroundColor" />
        </el-form-item>
      </el-form>
    </el-popover>
  </div>
</template>

<script>
import { deepClone } from "../../../utils";
export default {
  name: "TableStyle",
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formInline: {}
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(this.formInline)) {
          this.formInline = deepClone(newValue);
        }
      }
    },
    formInline: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(this.value)) {
          this.$emit("input", newValue);
        }
      }
    }
  }
};
</script>

<style lang="scss" >
.Fg-table-style {
  .popper__arrow {
    display: none !important;
  }
}
</style>